<template>
    <div class="home">
        <section class="left">
            <Logo />
            <!--新保出单量占比-->
            <Left1 />
            <!--各保司出单量占比-->
            <Left2 />
            <!--趋势图-->
            <Left3 />
            <!--表格-车险出单品牌占比-->
            <Left4 />
        </section>
        <section class="center">
            <Center1/>
            <Map />
        </section>
        <section class="right">
            <!--时间-->
            <Time />
            <!--漏斗-续保漏斗-->
            <Right1 />  
            <!--Table-经销商门店的续保单Top5-->
            <Right2 />  
            <Right3 />
            <Right4 />
        </section>
    </div>

</template>

<script setup> 
import { onMounted, ref } from 'vue'
import Logo from "../components/left/left-logo.vue"
import Left1 from "../components/left/left-1.vue"
import Left2 from "../components/left/left-2.vue"
import Left3 from "../components/left/left-3.vue"
import Left4 from "../components/left/left-4.vue"
import Time from "../components/right/right-time.vue"
import Right1 from "../components/right/right-1.vue"
import Right2 from "../components/right/right-2.vue"
import Right3 from "../components/right/right-3.vue"
import Right4 from "../components/right/right-4.vue"
import Center1 from "../components/center/center-1.vue"
import Map from "../components/center/map.vue"
</script>

<style lang="scss" scoped>
.home{//整个容器的位置
    width: 100%;
    height: calc(100vw * (2160/5760));
    color: #fff;
    display: flex;
    flex-direction: row;
}
.left{
    // border: 1px solid red;
    width: 48.6rem;
    margin-left: 4rem;  
}
.center{
    // border: 1px solid blue;
    flex: 1.5;
}
.right{
    // border: 1px solid green;
    width: 57.4rem;
    margin-right: 3.5rem;
}
</style>